<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
        <%@ include file="head.jsp" %>
        <%@ include file="jquery.jsp" %>
        <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/script/smooth-scroll.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/dwr/interface/playlistService.js"/>"></script>
        <script type="text/javascript" language="javascript">

            var playlists;

            function init() {
                dwr.engine.setErrorHandler(null);
                updatePlaylists();
            }

            function updatePlaylists() {
                playlistService.getReadablePlaylists(playlistCallback);
            }

            function createEmptyPlaylist() {
				showAllPlaylists();
                playlistService.createEmptyPlaylist(playlistCallback);
            }

            function showAllPlaylists() {
                $('#playlistOverflow').show('blind');
                $('#showAllPlaylists').hide('blind');
            }

            function playlistCallback(playlists) {
                this.playlists = playlists;

                $("#playlists").empty();
                $("#playlistOverflow").empty();
                for (var i = 0; i < playlists.length; i++) {
                    var playlist = playlists[i];
                    var overflow = i > 9;
                    $("<p class='dense'><a target='main' href='playlist.view?id=" +
                            playlist.id + "'>" + playlist.name + "&nbsp;(" + playlist.fileCount + ")</a></p>").appendTo(overflow ? "#playlistOverflow" : "#playlists");
                }

                if (playlists.length > 10 && !$('#playlistOverflow').is(":visible")) {
                    $('#showAllPlaylists').show();
                }
            }
        </script>
    </head>

    <body class="bgcolor2 leftframe" onload="init()">
        <a name="top"></a>

        <div style="padding-bottom:0.5em">
            <c:forEach items="${model.indexes}" var="index">
                <a href="#${index.index}" accesskey="${index.index}">${index.index}</a>
            </c:forEach>
        </div>

        <div style="padding-bottom:0.5em">
            <div class="forward">
                <c:choose>
                    <c:when test="${model.scanning}">
                        <a href="left.view"><fmt:message key="common.refresh"/></a>
                    </c:when>
                    <c:otherwise>
                        <a href="left.view?refresh=true"><fmt:message key="common.refresh"/></a>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>

        <c:if test="${fn:length(model.mediaFolders) > 1}">
            <div style="padding-top:0.3em">
                <select name="mediaFolderId" style="width:100%" onchange="location = 'left.view?mediaFolderId=' + options[selectedIndex].value;" >
                    <option value="-1"><fmt:message key="left.allfolders"/></option>
                    <c:forEach items="${model.mediaFolders}" var="mediaFolder">
                        <option ${model.selectedMediaFolder.id == mediaFolder.id ? "selected" : ""} value="${mediaFolder.id}">${mediaFolder.name}</option>
                    </c:forEach>
                </select>
            </div>
        </c:if>

        <h2 class="bgcolor1"><fmt:message key="left.playlists"/></h2>
        <div id="playlistWrapper" style='padding-left:0.5em'>
            <div id="playlists"></div>
            <div id="playlistOverflow" style="display:none"></div>
            <div style="padding-top: 0.3em"/>
            <div id="showAllPlaylists" style="display: none"><a href="#" onclick="showAllPlaylists(); return false;"><fmt:message key="left.showallplaylists"/></a></div>
            <div><a href="#" onclick="createEmptyPlaylist(); return false;"><fmt:message key="left.createplaylist"/></a></div>
        </div>

        <c:forEach items="${model.indexedMediaElements}" var="entry">
            <table class="bgcolor1" style="width:100%;padding:0;margin:1em 0 0 0;border:0">
                <tr style="padding:0;margin:0;border:0">
                    <th style="text-align:left;padding:0;margin:0;border:0"><a name="${entry.key.index}"></a>
                        <h2 style="padding:0;margin:0;border:0">${entry.key.index}</h2>
                    </th>
                    <th style="text-align:right;">
                        <a href="#top"><img src="<spring:theme code="upImage"/>" alt=""></a>
                    </th>
                </tr>
            </table>

            <c:forEach items="${entry.value}" var="element">
                <p class="dense" style="padding-left:0.5em">
                    <span title="${element.name}">
                        <c:url value="main.view" var="mainUrl">
                            <c:forEach items="${element.mediaElements}" var="mediaElement">
                                <c:param name="id" value="${mediaElement.id}"/>
                            </c:forEach>
                        </c:url>
                        <a target="main" href="${mainUrl}"><str:truncateNicely upper="35">${element.name}</str:truncateNicely></a>
                        </span>
                    </p>
            </c:forEach>
        </c:forEach>

        <div style="padding-top:1em"></div>

        <c:forEach items="${model.singleMediaElements}" var="mediaElement">
            <p class="dense" style="padding-left:0.5em">
                <span title="${mediaElement.name}">
                    <c:import url="playAddDownload.jsp">
                        <c:param name="id" value="${mediaElement.id}"/>
                        <c:param name="playEnabled" value="${model.user.streamRole}"/>
                        <c:param name="addEnabled" value="${model.user.streamRole}"/>
                        <c:param name="downloadEnabled" value="${model.user.downloadRole}"/>
                        <c:param name="video" value="${mediaElement.video}"/>
                    </c:import>
                    <str:truncateNicely upper="35">${mediaElement.name}</str:truncateNicely>
                    </span>
                </p>
        </c:forEach>

        <div style="height:5em"></div>


        <div class="bgcolor2" style="opacity: 1.0; clear: both; position: fixed; bottom: 0; right: 0; left: 0;
             padding: 0.25em 0.75em 0.25em 0.75em; border-top:1px solid black; max-width: 850px;">
            <c:forEach items="${model.indexes}" var="index">
                <a href="#${index.index}">${index.index}</a>
            </c:forEach>
        </div>

    </body></html>